<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useStore } from "vuex";

// 使用store仓库
const store = useStore();

// 获取后台数据
const getList = () => {
  store.dispatch("staff/getList");
};

// onMounted时调用
onMounted(() => {
  getList();
});

// 分页
const currentPage = ref(1);
const pageSize = ref(1);

// form title
let title = ref("新增");
// 筛选
const screenName = ref("");
const screenRole = ref("");

let dialogVisible = ref(false);
let form = reactive({
  LoginName: "",
  userName: "",
  employeeID: "",
  phone: "",
  email: "",
  LoginKey: "",
  roles: "",
  status: false,
});

// 校验
const rules = reactive({
  LoginName: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  userName: [
    {
      required: true,
      message: "请输入真实姓名",
      trigger: "blur",
    },
    {
      min: 2,
      // max: 5,
      message: "长度至少为2",
      trigger: "blur",
    },
  ],
  employeeID: [
    {
      required: true,
      message: "请输入员工号",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      min: 11,
      max: 11,
      message: "请输入11位数字的手机号",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入email",
      trigger: "blur",
    },
    {
      type: "email",
      message: "请输入正确的email",
      trigger: ["blur", "change"],
    },
  ],
  LoginKey: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      message: "长度至少为6位",
      trigger: "blur",
    },
  ],
  roles: [
    {
      required: true,
      message: "请选择角色",
      trigger: "change",
    },
  ],
  status: [
    {
      required: true,
      message: "请选择状态",
      trigger: "change",
    },
  ],
});
const formRef = ref({});

// 筛选
const screen = () => {
  console.log(screenName.value);
  console.log(screenRole.value);
};

/**
 * 控制弹出框
 */
const hasDialogVisible = () => {
  dialogVisible.value = !dialogVisible.value;
};

// 新增
const addstaff = () => {
  title.value = "新增";
  hasDialogVisible();
};

// form取消
const staffCancle = () => {
  console.log(dialogVisible);
  dialogVisible = false;
  console.log(dialogVisible);
};

// 保存员工信息
const staffOnSubmit = (formObj) => {
  formObj.validate((valid) => {
    if (valid) {
      ElMessage({
        message: "添加员工信息成功",
        type: "success",
      });
      // 将数据发送给后台
      store.dispatch("staff/setList", form);
      // 获取最新数据
      getList();
      // 关闭遮罩层
      hasDialogVisible();
      // 清空form表单
      formObj.resetFields();
    } else {
      ElMessage.error("请正确输入员工信息");
      return false;
    }
  });
};
// lsh3201418998@163.com

// 分页
// const handleSizeChange = (val: number) => {
//   console.log(`${val} items per page`);
// };
// const handleCurrentChange = (val: number) => {
//   console.log(`current page: ${val}`);
// };

// 编辑
const handleEdit = (row) => {
  title.value = "编辑";
  form = JSON.parse(JSON.stringify(row));
  console.log(form);
  hasDialogVisible();
};

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("确定要删除吗?", "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      store.dispatch("staff/delList", id);
      // 重新获取数据
      getList();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 删除多条
const handleDeleteAll = () => {
  console.log(store.state.staff.idsArr);
  store.dispatch("staff/delAllList", store.state.staff.idsArr);
  // 重新获取数据
  getList();
};

// 复选框被选中时触发
const handleSelectionChange = (val) => {
  let ids = [];
  val.forEach((val) => {
    ids.indexOf(val._id) > -1
      ? ids.splice(ids.indexOf(val._id), 1)
      : ids.push(val._id);
  });
  store.commit("staff/GET_IDS", ids);
};
</script>

<template>
  <el-row style="margin: 10px">
    <el-col :span="8">
      <el-button type="primary" @click="addstaff">新增员工</el-button>
      <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>
    </el-col>
    <el-col :span="5">
      <el-input v-model="screenName" placeholder="请输入姓名或用户名" />
    </el-col>
    <el-col :span="3" :offset="1">
      <el-select v-model="screenRole" placeholder="全部">
        <el-option label="管理员" value="A"></el-option>
        <el-option label="编辑" value="B"></el-option>
      </el-select>
    </el-col>
    <el-col :span="5" :offset="1">
      <el-button type="primary" @click="screen">筛选</el-button>
    </el-col>
  </el-row>
  <!-- 表格 -->
  <el-table
    ref="multipleTableRef"
    :data="store.state.staff.list"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="用户名" prop="LoginName" width="120">
    </el-table-column>
    <el-table-column label="真实姓名" prop="userName" width="120">
    </el-table-column>
    <el-table-column label="手机号" prop="phone" width="200"> </el-table-column>
    <el-table-column label="角色" prop="roles" width="120"> </el-table-column>
    <el-table-column label="启用状态" prop="status" width="120">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          inline-prompt
          active-text="on"
          inactive-text="off"
          active-color="#13ce66"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="添加时间" prop="dataTime" width="300">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row._id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[1, 2, 3, 5]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="10"
    style="position: relative; top: 20px"
  >
  </el-pagination>
  <!-- form表单 -->
  <el-dialog v-model="dialogVisible" :title="title + '员工信息'" width="40%">
    <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="用户名" prop="LoginName">
        <el-input v-model="form.LoginName"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="userName">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="员工号" prop="employeeID">
        <el-input v-model="form.employeeID"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="LoginKey">
        <el-input v-model="form.LoginKey"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="roles">
        <el-select v-model="form.roles" placeholder="请选择角色">
          <el-option label="管理员" value="A"></el-option>
          <el-option label="员工" value="B"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="form.status"
          inline-prompt
          active-text="on"
          inactive-text="off"
          active-color="#13ce66"
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="staffOnSubmit(formRef)"
          >保存</el-button
        >
        <el-button @click="hasDialogVisible">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
form >>> .el-form-item__label {
  vertical-align: left;
  text-align-last: justify;
}
</style>
